<template>
  <div class="home">
    <div class="trading">
      <h5>交易看板</h5>
      <time-range @date-change="changeDate"></time-range>
    </div>
    <div class="trading">
      <scEcharts height="250px" :option="option"></scEcharts>
    </div>
  </div>
</template>

<script>
  import common from "@/mixins/common.js";
  import timeRange from "@/components/timeRange.vue";
  import scEcharts from "@/components/scEcharts";

  var config = {};

  config.methods = {};
  config.components = {
    timeRange,
    scEcharts
  };
  config.methods.changeDate = function (event) {
    console.info(event);
    var self = this;
    var url = "/tenantRest/user/num.htm";
    if (event.type == "month") {
      url = "/tenantRest/user/month.htm";
    }
    this.postData(url, event, (res) => {
      var data = [],
        data1 = [];

      res.list.forEach((item) => {
        data.push(item.label);
        data1.push(item.num);
      })
      self.option.series[0].name = res.name;
      self.option.xAxis[0].data = data;
      self.option.series[0].data = data1;
      // 基于准备好的dom，初始化echarts实例
      // 使用刚指定的配置项和数据显示图表。
      //self.trading.tradingPriceList[0].price = res.total;
    });

  };


  config.computed = {};

  config.data = function () {
    return {
      searchObject: {
        no: 1,
        size: 10,
      },
      dialogVisible: false,
      defaultProps: {
        children: "children",
        label: "name",
      },
      loading: false,
      tableData: {},
      option: {
        title: {
          text: "订单统计",
          subtext: "",
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#f9f9f9',
              color: '#666'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#f5f5f5'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#686868'
            }
          },
          data: ['2019-10', '2019-12', '2019-11', '2019-12', '2020-01', '2020-02', '2020-03']
        }],
        yAxis: [{
          nameTextStyle: {
            color: '#000',
            backgroundColor: '#fff'
          },
          axisLine: {
            lineStyle: {
              color: '#f5f5f5'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#686868'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#f5f5f5'
            }
          },
        }],
        series: [{
          name: '搜索引擎1',
          type: 'line',
          stack: '总量',
          smooth: 0.5,
          label: {
            show: false
          },
          itemStyle: {
            color: '#5491de'
          },
          lineStyle: {
            color: '#5491de'
          },
          areaStyle: {
            color: '#5491de',
            opacity: 1
          },
          emphasis: {
            label: {
              color: '#fff',
            },
            itemStyle: {
              color: '#5491de',
              borderColor: "#fff",
              borderWidth: 2
            }
          },
          data: [0, 932, 901, 934, 0, 0, 0]
        }]
      },
    };
  };
  config.methods.showAddView = function () {
    this.$router.push({
      path: "add",
    });
  };
  config.mounted = function () {
    //this.getDay();
  };
  config.mixins = [common];

  export default config;
</script>

<style>
  h5 {
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    margin: 10px 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #666;
  }

  /* 主页 */
  .home {
    padding: 0 10px;
    background-color: #f9f9f9;
    overflow: auto;
  }

  /* 交易看板 */
  .trading,
  .core,
  .goods,
  .KM {
    padding: 10px 20px;
    background-color: #fff;
  }
</style>